<template>
  <div>
    <el-form :inline="true" class="user-search">
      <el-form-item>
        <el-input placeholder="请输入内容" v-model="queryForm.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button title="查询" type="primary" icon="el-icon-search" @click="handleList">查询</el-button>
        <el-button type="success" @click="handleAdd">新增</el-button>
        <el-button type="danger">批量删除</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="id" label="ID" width="60">
      </el-table-column>
      <el-table-column prop="img" label="房型大图" width="350">
      </el-table-column>
      <el-table-column prop="name" label="房型名字" width="120">
      </el-table-column>
      <el-table-column prop="price" label="门市价" width="80">
      </el-table-column>
      <el-table-column prop="floor" label="楼层" width="80">
      </el-table-column>
      <el-table-column prop="people" label="可住人数" width="80">
      </el-table-column>
      <el-table-column prop="totalNum" label="数量" width="80">
      </el-table-column>
      <el-table-column prop="size" label="床型尺寸" width="80">
      </el-table-column>
      <el-table-column prop="state" label="房间状态" width="80">
      </el-table-column>
      <el-table-column label="操作" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.$index,scope.row)"></el-button>
          <el-button type="primary" icon="el-icon-edit" circle @click="handelEdit()"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <div align="center">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryForm.page"
        :page-sizes="[4, 10, 20, 50]" :page-size="queryForm.rows" layout="total, sizes, prev, pager, next, jumper"
        :total="queryForm.total">
      </el-pagination>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogMergeForm">
      <el-form :model="mergeForm" :rules="rules">
        <el-form-item prop="name" label="房间名字" :label-width="100">
          <el-input v-model="mergeForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="classify" label="房间类型" :label-width="100">
          <el-radio v-model="mergeForm.state" label="1">普通房</el-radio>
          <el-radio v-model="mergeForm.state" label="2">钟点房</el-radio>
        </el-form-item>
        <el-form-item prop="oprice" label="门市价" :label-width="100">
          <el-input v-model="mergeForm.oprice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="tags" label="房型标签" :label-width="100">
          <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
            {{tag}}
          </el-tag>
          <el-input class="input-new-tag" v-if="inputVisible" v-model="mergeForm.tags" ref="saveTagInput" size="small"
            @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">添加</el-button>
        </el-form-item>
        <el-form-item prop="logo" label="房型大图" :label-width="formLabelWidth">
          <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item prop="facilities" label="房间设施" :label-width="formLabelWidth">
          <el-checkbox v-model="checked1" label="热水"></el-checkbox>
          <el-checkbox v-model="checked2" label="空调"></el-checkbox>
          <el-checkbox v-model="checked3" label="电视"></el-checkbox>
          <el-checkbox v-model="checked4" label="WIFI"></el-checkbox>
          <el-checkbox v-model="checked5" label="窗户"></el-checkbox>
        </el-form-item>
        <el-form-item prop="floor" label="楼层" :label-width="formLabelWidth">
          <el-input v-model="mergeForm.floor" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="people" label="可住人数" :label-width="formLabelWidth">
          <el-input v-model="mergeForm.people" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="size" label="床型尺寸" :label-width="formLabelWidth">
          <el-input v-model="mergeForm.size" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogMergeForm = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogTitle: '新建酒店房型',
        tableData: [],
        dialogMergeForm: false,
        dynamicTags: [],
        inputVisible: false,
        inputValue: '',
        dialogImageUrl: '',
        dialogVisible: false,
        checked: '',
        checked: '',
        checked: '',
        checked: '',
        checked: '',
        queryForm: {
          img: null,
          name: null,
          price: null,
          floor: null,
          people: null,
          totalNum: null,
          size: null,
          state: null,
          page: 1,
          rows: 4,
          total: -1
        },
        mergeForm: {
          id: null,
          sellerId: null,
          name: null,
          price: null,
          img: null,
          floor: null,
          people: null,
          bed: null,
          breakfast: null,
          facilities: null,
          windows: null,
          logo: null,
          totalNum: null,
          size: null,
          uniacid: null,
          isRefund: null,
          yjState: null,
          yjCost: null,
          sort: null,
          state: null,
          classify: null,
          rzTime: null,
          discounts: null,
          tags: null,
          oprice: null
        },
        rules: {
          name: [{
            required: true,
            message: '房型名字',
            trigger: 'blur'
          }],
          oprice: [{
            required: true,
            message: '门市价',
            trigger: 'blur'
          }],
          floor: [{
            required: true,
            message: '楼层',
            trigger: 'blur'
          }],
          people: [{
            required: true,
            message: '可住人数',
            trigger: 'blur'
          }],
          size: [{
            required: true,
            message: '床型尺寸',
            trigger: 'blur'
          }],
        },
      }
    },
    created() {
      this.doList()
    },
    methods: {
      doList: function() {
        this.axios.post(this.axios.urls.DYM_HOTELROOM_LIST, this.queryForm).then((response) => {
          console.log(response);
          this.tableData = response.data.result;
          this.queryForm.page = response.data.page
          this.queryForm.rows = response.data.rows
          this.queryForm.total = response.data.total
        });
      },
      handleList: function() {
        this.doList()
      },
      //分页
      handleSizeChange(rows) {
        this.queryForm.page = 1
        this.queryForm.rows = rows
        this.doList()
      },
      handleCurrentChange(page) {
        this.queryForm.page = page
        this.doList()
      },

      handleDelete: function(index,row) {
        // console.log("来了 老弟");
        // console.log(row.id);
        this.mergeForm.id = row.id
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          console.log("删除"),
            this.axios.post(this.axios.urls.DYM_HOTELROOM_DEL, {
              id: row.id
            }).then((response) => {
              this.$message({
                message: '删除成功!',
                type: 'success'
              })
              this.doList()
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      handleAdd: function() {
        this.dialogTitle = '新建酒店房型',
          this.dialogMergeForm = true
      },
      handelEdit: function() {
        this.dialogTitle = '编辑酒店房型',
          this.mergeForm.name = null
        this.mergeForm.classify = null
        this.mergeForm.oprice = null
        this.mergeForm.tags = null
        this.mergeForm.logo = null
        this.mergeForm.facilities = null
        this.mergeForm.floor = null
        this.mergeForm.people = null
        this.mergeForm.size = null

        this.dialogMergeForm = true
      },

      handelMerge:function(){

      },
      //标签
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      //照片上传
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }
  }
</script>

<style scoped>
  .user-search {
    margin-top: 20px;
  }

  .userRole {
    width: 100%;
  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .modal-dialog {
    z-index: 10000 !important;
  }

  .el-tag+.el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
